<template>
  <!-- 取消支付 -->
    <view class="fixed_box cancelPay_fixed_box" v-if="show">
      <view class="publicPopup_box">
        <view class="cancelPay_msg_box">
          <view class="publicPopup_title_box">
            <view class="clerk_box">真的真的不要我了吗？</view>
            <image class="cry_gif_box" mode="scaleToFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/cry.gif.png"></image>
          </view>
          <view class="invalid_text" v-if="countdownPayData.code==201">订单已经飞走了，请重新下单购买</view>
          <view class="order_count_down_box" v-else>
            <view>订单将在</view>
            <view class="order_count_down">{{countdownPayData.min || 0}}:{{countdownPayData.sec || 0}}</view>
            <view>后飞走</view>
          </view>
          <view class="tips_text_box">一大波人正在抢购</view>
        </view>
        <view class="btn_list_box" v-if="countdownPayData.code==201">
          <view class="btn_box btn_box_l" hover-class='hover' @click.stop="closePaymentFn">取消</view>
          <view class="btn_box btn_box_r" hover-class='hover' @click.stop="reOrderFn">重新下单</view>
        </view>
        <view class="btn_list_box" v-else>
          <view class="btn_box btn_box_l" hover-class='hover' @click.stop="giveUpFn">暂时放弃</view>
          <view class="btn_box btn_box_r" hover-class='hover' @click.stop="placeAnOrderTwoFn">继续支付</view>
        </view>
      </view>
    </view>
    <!-- 取消支付END -->
</template>
<script>
import Util from "@/api/util.js"
export default {
  props:{
    show: {
      type: Boolean,
      default: false,
    },
    paymentTime: {
      type: Number|String,
      default: '',
    },
    isTime: {
      type: Boolean,
      default: true,
    }
  },
  watch: {
    show(nVal){
      if(nVal){
        if (this.isTime) this.countdownPayFn()
      }else{
        // if (this.isTime) this.initFn()
      }
    }
  },
  data () {
    return {
      countdownPayData: { // 取消支付倒计时
        code: 0,
        day: '00',
        hr: '00',
        min: '05',
        sec: '00'
      },
      timer1: null, // 倒计时定时器
    }
  },
  methods: {
    initFn () {
      this.countdownPayData = { // 取消支付倒计时
        code: 0,
        day: '00',
        hr: '00',
        min: '05',
        sec: '00'
      }
      if (this.timer1) clearInterval(this.timer1)
    },
    reOrderFn () {
      this.initFn()
      this.$emit('reOrderFn')
    },
    closePaymentFn () { // 关闭弹窗
      this.$emit('closePaymentFn')
    },
    giveUpFn () { // 拒绝支付
      this.initFn()
      this.$emit('giveUpFn')
    },
    placeAnOrderTwoFn () { // 继续下单
      if (this.surplusTiem<1000) return
      this.$emit('placeAnOrderTwoFn')
    },
    countdownPayFn () {
      let endTime = Date.parse(new Date()) + Number(this.paymentTime)
      this.timer1 = setInterval(()=>{
        this.countdownPayData = Util.countdownPay(endTime)
        if (this.countdownPayData&&this.countdownPayData.code==201) {
          clearInterval(this.timer1)
        }
      },1000)
    },
  }
}
</script>
<style lang="scss" scoped>
.fixed_box {
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
}
</style>